<template>
  <div class="canvas-page f-c f-g" style="overflow:hidden;">
    <div style="padding-left: 20px">
      <el-form inline>
        <el-form-item label="选择模版：">
          <el-select
            @change="changeCategory"
            v-model="searchParams.bigCategoryId"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :value="item.id"
              :label="item.templateCategory"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目子类别：">
          <el-select
            @change="changeSubCategory"
            v-model="searchParams.smallCategoryId"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :value="item.id"
              :label="item.templateCategory"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <CanvasPage ref="canvasRef" />
  </div>
</template>

<script>
import CanvasPage from "./canvas";
import { http_project_process, http_project_process_template } from "@/api";
export default {
  name: "Config",
  components: {
    CanvasPage
  },
  data() {
    return {
      searchParams: {
        bigCategoryId: "",
        smallCategoryId: ""
      },
      options1: [],
      options2: []
    };
  },
  created() {
    http_project_process_template.getCategory({ top: 0 }).then(res => {
      this.options1 = res.data;
    });
  },
  mounted() {
    this.$nextTick(() => {
      http_project_process
        .read({
          projectId: this.$route.query.id
        })
        .then(res => {
          const { bigCategoryId, smallCategoryId, canvas } = res.data;
          this.searchParams.bigCategoryId = bigCategoryId;
          this.searchParams.smallCategoryId = smallCategoryId;
          this.changeCategory(bigCategoryId);
          if (canvas) {
            this.$refs.canvasRef.initEdit({
              item: { ...this.searchParams },
              templateRes: res
            });
          }
        });
    });
  },
  methods: {
    changeCategory(val) {
      if (val) {
        http_project_process_template
          .getCategory({ top: 1, parentId: val })
          .then(res => {
            this.options2 = res.data;
          });
      } else {
        this.options2 = [];
      }
    },
    changeSubCategory() {
      // 获取模版
      this.$nextTick(() => {
        this.$refs.canvasRef.initAdd({
          ...this.searchParams
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.canvas-page {
    min-height: calc(100vh - 500px)
}
</style>
